<template>
  <p class="title">
    <span class="warningColor">*</span>
    <span>数量和重量必须填写一个</span>
    <a-button type="outline" style="margin-left: 20px" size="mini" @click="add(partsList.length)">
      <template #icon>
        <icon-plus />
      </template>
    </a-button>
  </p>
  <!-- 设置产品配件-->
  <a-table class="table-singe-line show-border-table" ref="tableRemoveRef" :data="partsList" size="mini" :pagination="false">
    <template #columns>
      <a-table-column data-index="partsName" title="配件">
        <template #title>
          <p>
            <span class="warningColor">*</span>
            <span>配件</span>
          </p>
        </template>
        <template #cell="{ record }">
          <a-input placeholder="" v-model="record.partsName" />
        </template>
      </a-table-column>
      <a-table-column data-index="partsSpecs" title="规格&尺寸">
        <template #cell="{ record }">
          <a-input placeholder="" v-model="record.partsSpecs" />
        </template>
      </a-table-column>
      <a-table-column data-index="partsAmt" title="数量">
        <template #cell="{ record }">
          <a-input-number placeholder="" v-model="record.partsAmt" />
        </template>
      </a-table-column>
      <a-table-column data-index="partsWeight" title="重量（g）">
        <template #cell="{ record }">
          <a-input-number v-model="record.partsWeight" placeholder="" hide-button />
        </template>
      </a-table-column>
      <a-table-column data-index="color" key="color" title="操作" :width="100">
        <template #cell="{ rowIndex }">
          <a-space :size="20">
            <a-button type="outline" size="mini" @click="add(rowIndex)">
              <template #icon>
                <icon-plus />
              </template>
            </a-button>
            <a-button type="outline" size="mini" @click="cancel(rowIndex)">
              <template #icon>
                <icon-minus />
              </template>
            </a-button>
          </a-space>
        </template>
      </a-table-column>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { cloneDeep } from 'lodash-es'

  onMounted(setDefaultData)
  const props = defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  })
  const partsList = ref<Array<any>>([])

  function setDefaultData() {
    partsList.value = cloneDeep(props.list)
  }
  function add(i: number) {
    partsList.value.splice(i + 1, 0, {})
  }
  function cancel(i: number) {
    partsList.value.splice(i, 1)
  }
  function getPartsList() {
    return partsList.value
  }
  defineExpose({ getPartsList })
</script>
<style lang="less" scoped>
  .title {
    margin: 10px 0;
  }
</style>
